<script>
    var __EditUrl = '/menu/edit.mhtml?menuId=';
    var __DelUrl = '/menu/del.do';
    function delData (menuId){
        var loadIndex = layer.load(2);
        $.ajax({
            type: "post",
            url: __DelUrl,
            data: {menuId:menuId},
            success: function (res) {
                layer.close(loadIndex);
                if(res.code==0){
                    layer.alert(res.msg,function(index){
                        window.location.reload()
                    })
                }else{
                    layer.alert(res.msg)
                }
            },
            error:function(err){
                layer.alert(err)
            }
        });
    }
    function treetableRender(handler,data){
        handler.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'id',
            treePidName: 'parentId',
            elem: '#munu-table',
            data: data,
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'title', minWidth: 200, title: '菜单名称'},
                {field: 'menuIcon', title: '菜单标识',align: 'center',templet: function (d){
                        return '<p><i class="layui-icon '+ d.menuIcon +'"></i></p>';
                    }},
                {field: 'path', title: '菜单地址'},
                {field: 'pathParam', title: '请求变量'},
                {field: 'orderNum', width: 80, align: 'center', title: '排序'},
                {
                    field: 'menuType', width: 80, align: 'center', templet: function (d) {
                        if (d.menuType == 1) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        }else if (d.menuType == 2) {
                            return '<span class="layui-badge layui-bg-blue">菜单</span>';
                        }else if (d.menuType == 3) {
                            return '<span class="layui-badge layui-bg-gray">节点</span>';
                        } else {
                            return '<span class="layui-badge-rim">超链接</span>';
                        }
                    }, title: '类型'
                },
                {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
            ]],
            done: function (res) {
                layer.closeAll('loading');
                $('#btn-fold').trigger("click");
            }
        });
    }
    layui.use(['table', 'treetable','form'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var treetable = layui.treetable;
        var MenuListUrl = '/menu/list.do';

        // 渲染表格
        var loadIndex = layer.load(2);
        $.ajax({
            type: "get",
            url: MenuListUrl,
            success: function (res) {
                if(res.code==0){
                    treetableRender(treetable,res.data);
                }else{
                    layer.alert(res.msg)
                }
            },
            error:function(err){
                layer.alert(err)
            },
            complete:function (){
                layer.close(loadIndex);
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        $("#add-menu").click(function(e){
            e.preventDefault()
            layer.open({
                type: 2 //此处以iframe举例
                , title: '菜单管理'
                , area: ['640px', '400px']
                , shade: 0
                , content: '/menu/add.mhtml'
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        });
        //监听行列事件
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm("确认删除该菜单？",{
                    title:"操作确认",
                    yes:function(index,layero){
                        delData(data.id)
                        layer.close(index)
                    },
                    cancel:function(index){
                    }

                })
            } else if (layEvent === 'edit') {
                //layer.msg('修改' + data.id);
                layer.open({
                    type: 2 //iframe
                    , title: '修改菜单'
                    , area: ['640px', '400px']
                    , shade: 0
                    , content: __EditUrl+data.id
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });
    });
</script>